<template>
  <div class="login">
    <!-- <h1>月月鸟系统</h1> -->

    <div class="login_box">
      <div class="titleBox">月月鸟系统</div>
      <div class="formBox">
        <a-form :model="formState" name="basic">
          <a-form-item label="帐号" name="username" :rules="[{ message: '请输入账号!' }]">
            <a-input v-model:value="formState.username" style="width: 200px" />
          </a-form-item>

          <a-form-item label="密码" name="password" :rules="[{ message: '请输入密码!' }]">
            <a-input-password v-model:value="formState.password" style="width: 200px" />
          </a-form-item>

          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              @click="submit"
              style="position: absolute; left: 50%; transform: translateX(-50%)"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { loginRole } from '@/api/login.js'
import useRoleInfo from '@/store/roleInfo.js'
export default defineComponent({
  setup() {
    const formState = reactive({
      username: 'admin',
      password: '123456'
    })
    const onFinish = (values) => {
      console.log('Success:', values)
    }
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }
    const router = useRouter()
    const roleStore = useRoleInfo()
    const submit = async () => {
      const data = {
        username: formState.username,
        password: formState.password
      }
      const result = await loginRole(data)
      console.log('===')
      console.log(result)
      roleStore.info = result
      sessionStorage.setItem('isLogin', true)
      sessionStorage.setItem('roleInfo', JSON.stringify(roleStore.info))
      router.push('/home')
    }
    return {
      formState,
      onFinish,
      onFinishFailed,
      submit
    }
  }
})
</script>

<style scoped lang="less">
.login {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  background-image: url('@/assets/images/niao.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .titleBox {
    font-size: 25px;
    margin: 20px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .formBox {
    font-size: 25px;

    // margin-right: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login_box {
    height: 300px;
    width: 300px;
    border-radius: 10px;
    margin: 10px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    background-color: #fff;
    opacity: 0.9;
  }
}
</style>
